'use strict';
import React from 'react'
import { View, Text, Image, TouchableOpacity, FlatList, RefreshControl } from 'react-native'
import { Metrics, Colors, Fonts } from '../Themes'
import { API, WINDOW } from '../Services'
import styles from './Styles/CommonContainerStyles'
import u from 'underscore'

class HomeScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            isRefreshing: false,
            dataSource: [],
        }
    }

    componentDidMount() {
        this._onRefresh()
    }

    _onRefresh() {
        this.setState({ isRefreshing: true });
        this.fetchData();
    }

    fetchData() {
        API.getRoomList(WINDOW.__data.loginUser.userid).then((response) => {
            this.setState({ isRefreshing: false })
            const { ok, data } = response
            if (ok) {
                this.setState({ dataSource: data })
                if (u.toArray(data).length === 1) {
                    let item = data[0]
                    this.props.navigation.navigate('DevicesHome', { ...item, hideBack: true })
                }
            }
        })
    }

    _onClick(item) {
        this.props.navigation.navigate('DevicesHome', { ...item })
    }

    _renderItem({ item, index }) {
        return (
            <TouchableOpacity onPress={() => this._onClick(item)} style={{ height: 50, width: '90%', backgroundColor: 'white', marginTop: 15, borderRadius: 5, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'center', }}>
                    <View style={{ width: 3, height: 20, backgroundColor: Colors.buttonColor }} />
                    <Text style={{ fontSize: 18, fontWeight: 'bold', color: 'black', marginLeft: 12 }}>{item.sceneName}</Text>
                </View>
                <View style={{ marginRight: 12, flexDirection: 'row', alignItems: 'center', alignSelf: 'center', }}>
                    <Image source={require('../Images/cell_right.png')} style={{ tintColor: '#47496D' }} />
                </View>
            </TouchableOpacity>
        )
    }

    _renderHeader() {
        return (
            <View >
                <View style={{ marginBottom: 20, marginTop: 35, flexDirection: 'row', alignItems: 'center' }}>
                    <Image source={require('../Images/logo_d.png')} style={{ marginLeft: 13 }} />
                    <Text style={{ fontSize: 18, fontWeight: 'bold', color: 'white', marginLeft: 10, marginRight: 10, flex: 1 }}>{WINDOW.__data.companyName}</Text>
                </View>
            </View>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <Image source={require('../Images/bg_home.png')} style={{ width: '100%', height: '100%', position: 'absolute' }} resizeMode='stretch' />
                <FlatList
                    data={this.state.dataSource}
                    ListHeaderComponent={this._renderHeader()}
                    renderItem={this._renderItem.bind(this)}
                    refreshControl={<RefreshControl
                        onRefresh={this._onRefresh.bind(this)}
                        refreshing={this.state.isRefreshing} />}
                    keyExtractor={(item) => `${item.sceneId}`}
                />
            </View>
        )
    }
}

export default HomeScreen
